<template>
  <div class="menu-container">
    <div class="filter-container">
      <el-button v-has="'btn_add'" class="filter-item" type="primary" icon="el-icon-plus" :size="size"
                 @click="openCreateMenuDialog">新增</el-button>
    </div>
    <rf-tree-table :data="tableList" :columns="columns" border :size="size" default-children="subMenus"
                   :defaultExpandAll="true">
      <template slot="target" slot-scope="{scope}">
        <div>{{ scope.row.target === '' ? 是 : 是 }}</div>
      </template>
      <template slot="isClientMenu" slot-scope="{scope}">
        <div v-if="scope.row.isClientMenu">是</div>
        <div v-else>否</div>
      </template>
      <template slot="operation" slot-scope="{scope}">
        <el-button v-has="'btn_edit'" type="text" :size="size" @click="openCreateMenuDialog(scope.row.id,scope)">
          编辑
        </el-button>
        <el-button v-has="'btn_delete'" type="text" :size="size" @click="deleteMenu(scope.row.id)">
          删除
        </el-button>
      </template>
    </rf-tree-table>

    <el-dialog class="menu-dialog"
               :title="isEdit? '编辑菜单':'新增菜单'"
               :visible.sync="dialogCreateMenuVisible" :close-on-click-modal="closeOnclickModal" @close="closeDialog">
      <el-steps :active="stepActive" simple style="width:50%;">
        <el-step title="1、基础信息" icon="00" />
        <el-step title="2、按钮信息" icon="00" />
      </el-steps>
      <el-form v-show="stepActive===1" ref="dialogForm" :model="menu" label-position="right" label-width="111px"
               :size="size" class="data-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父级菜单：" prop="parentId">
              <el-tree-select :options="treeList" :props="defaultProps" class="full-width" @getValue="getNode"
                              :value="menu.parentId" />
            </el-form-item>
            <el-form-item label="菜单名称：" prop="name" :rules="rf_rules({required:true})">
              <el-input v-model="menu.name" />
            </el-form-item>
            <el-form-item label="URL：" prop="path">
              <el-input v-model="menu.path" />
            </el-form-item>
            <el-form-item label="权限Code：" prop="permissions">
              <el-input v-model="menu.permissions" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标：" prop="css">
              <rf-icon-select v-model="menu.css" :placeholder="$t('图标')"/>
            </el-form-item>
            <el-form-item label="菜单目标：" prop="target" :rules="rf_rules({required:true})">
              <el-select v-model="menu.target" placeholder="请选择" class="full-width">
                <el-option v-for="item in targetList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="排序：" prop="sort" :rules="rf_rules({required:true, type: 'isInt'})">
              <el-input v-model="menu.sort" />
            </el-form-item>
            <el-form-item label="是否应用菜单/按钮：" prop="isClientMenu">
              <el-radio-group v-model="menu.isClientMenu">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否菜单呈现：" prop="hidden">
              <el-radio-group v-model="menu.hidden">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="stepActive === 2 ">
        <el-row class="padding-20">
          <el-button class="filter-item" type="primary" icon="el-icon-plus" :size="size" @click="addBtn">添加</el-button>
          <el-table :data="menuBtns" stripe style="width: 100%;margin:10px 0;" :size="size" border>
            <el-table-column prop="name" label="按钮名称" min-width="150" header-align="center"
                             align="center">
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.name" class="edit-input" :size="size" />
                </template>
                <span v-else>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="编码" min-width="150" header-align="center" align="center">
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.code" class="edit-input" :size="size" />
                </template>
                <span v-else>{{ row.code }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="permissions" label="权限code" min-width="150"
                             header-align="center" align="center">
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.permissions" class="edit-input" :size="size" />
                </template>
                <span v-else>{{ row.permissions }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="150">
              <template slot-scope="{$index,row}">
                <el-button :type="row.edit ? 'success' : 'primary'" :size="size"
                           :icon="row.edit ? 'el-icon-circle-check-outline' : 'el-icon-edit'" @click="confirmEdit(row)">
                  {{ row.edit ? '完成' : '编辑'}}
                </el-button>
                <el-button class="cancel-btn" :size="size" icon="el-icon-minus" type="danger"
                           @click="deleteBtn($index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <span class="tip-txt-red">tip：按钮名称和按钮编号不修改均不会保存</span>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click="stepActive=1">上一步</el-button>
        <el-button :disabled="menu.target !== 'iframe'" :size="size" @click="stepActive=2" v-show="stepActive<2">
          下一步
        </el-button>
        <el-button type="primary" :size="size" @click="save">
          完成
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import api from '@/utils/api.js'
  import ElTreeSelect from '@/components/Eltreeselect/index.vue'
  import rfIconSelect from '@/components/rf-icon-select'
  export default {
    name: 'Menu',
    components: {
      ElTreeSelect,
      rfIconSelect
    },
    data () {
      return {
        menu: {
          id: '',
          parentId: 0,
          css: '',
          name: '',
          target: "expand",
          path: '',
          sort: '',
          permissions: '',
          hidden: 0,
          isClientMenu: 1
        },
        menuBtns: [],
        tableList: [],
        treeList: [],
        defaultProps: {
          children: "subMenus",
          label: "name",
          value: "id"
        },
        columns: [
          {
            label: (() => {
              return '菜单名'
            })(),
            key: "name",
            headerAlign: "center",
            expand: true,
            align: "left"
          },
          {
            label: "url",
            key: "path",
            align: "center"
          },
          {
            label: '权限code',
            key: "permissions",
            align: "center"
          },
          {
            label: (() => {
              return '序号'
            })(),
            key: "sort",
            align: "center"
          },
          {
            label: (() => {
              return '是否应用菜单/按钮'
            })(),
            key: "isClientMenu",
            align: "center"
          },
          {
            label: (() => {
              return '操作'
            })(),
            key: "operation",
            align: "center"
          }
        ],
        dialogCreateMenuVisible: false,
        stepActive: 1,
        targetList: ['expand', 'iframe'],
        isEdit: false
      }
    },
    computed: {
      ...mapGetters(["size", "closeOnclickModal"])
    },
    mounted () {
      this.getAllMenuList()
    },
    methods: {
      // 下来树回选数据
      getNode(data) {
        this.menu.parentId = data;
      },
      getAllMenuList () {
        api.getAllMenuListAjax().then(response => {
          this.tableList = response.data
          this.treeList = response.data
        })
      },
      // 打开菜单的模态框
      openCreateMenuDialog (id, scope) {
        if (this.$refs["dialogForm"]) this.$refs["dialogForm"].resetFields()
        if (typeof id === "string") {
          api.getMenuDetailAjax({id}).then(response => {
            this.menu = Object.assign(this.menu, response.data.menu)
            const menuBtns = response.data.menuBtns && response.data.menuBtns.map(item => {
              item.edit = false
              return item
            })
            this.menuBtns = menuBtns || []
            this.menu.parentId = scope.row._parent ? scope.row._parent.id : 0;
          })
        }
        this.dialogCreateMenuVisible = true;
      },
      addBtn () {
        this.menuBtns.push({
          edit: true
        })
      },
      confirmEdit (row) {
        row.edit = !row.edit
      },
      deleteBtn (idx) {
        this.menuBtns.splice(idx, 1)
      },
      // 删除
      deleteMenu (id) {
        this.delConfirm().then(() => {
          api.deleteMenuAjax({id}).then(response => {
            this.$message.success('删除成功')
            this.getAllMenuList()
          })
        })
      },
      // 保存
      save () {
        // 过滤下按钮资源
        const menuBtns = this.menuBtns.filter(item => {
          if (item.name) {
            return item;
          }
        });
        const params = {
          menu: this.menu,
          menuBtns
        }
        this.validateSubmit("dialogForm").then(() => {
          api.saveOrUpdateMenusAjax(params).then(response => {
            this.dialogCreateMenuVisible = false
            this.$message.success('保存成功')
            this.getAllMenuList()
          })
        })
      },
      closeDialog () {
        this.stepActive = 1
        this.dialogCreateMenuVisible = false
        this.menuBtns = []
        this.menu.id = ''
      }
    }
  }
</script>

<style lang="scss">
  .menu {
    &-container {

      .el-dialog__body {
        padding: 0;
      }

      .edit-input {
        .el-input__inner {
          text-align: center;
        }
      }
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }

    &-dialog {
      .el-dialog {
        width: 50%;
        min-width: 940px;
      }
    }

  }
</style>
